import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.

    // 异步加载
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/test',
    name: 'test',
    component: () => import(/* webpackChunkName: "about" */ '../views/TestView.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  // 使用 URL 的 hash（#）来实现路由。它将 hash 后面的部分视为路由，因此在 URL 中不需要进行特殊的服务器配置
  // 使用 createWebHashHistory 模式时，因为 hash 部分不会被发送到服务器，所以服务器对于路由部分的变化是无感知的。这种模式有利于在不进行服务器配置的情况下，通过前端路由实现页面之间的切换。

  // history: createWebHistory(),
  // createWebHistory 使用 HTML5 History API 并且不包含 # 字符。它创建了一个基于真实 URL 的路由模式，使你的应用在浏览器中的 URL 看起来更加干净和传统。
  //使用 createWebHistory 模式时，你的服务器必须进行相应的配置，以便能够正确处理前端路由。具体配置通常包括将所有路径都指向你的应用入口点（例如 index.html），以确保刷新页面时能够正确加载你的 Vue 应用。
  //即需要后台配合
  routes
})

export default router
